import XtxConfirm from './xtx-confirm.vue'
// import { render, createVNode } from 'vue'
import { render } from 'vue'
// 准备div
const divVnode = <div class="xtx-confirm"></div>
// const divVnode = createVNode('div', { class: 'xtx-confirm' })
render(divVnode, document.body)
const div = divVnode.el
// 导出函数可通过调用 Confirm() 函数动态创建 XtxConfirm 组件
// 函数的返回值是 Promise 对象
export default ({ type, text }) => {
  return new Promise((resolve, reject) => {
    const confirmCallback = () => {
      resolve()
      render(null, div)
    }
    const cancelCallback = () => {
      reject(new Error('点击取消'))
      render(null, div)
    }
    // 1. 渲染组件
    // 2. 点击确认按钮，触发resolve同时销毁组件
    // 3. 点击取消按钮，触发reject同时销毁组件
    // 这个是传给组件内部的值 props
    const ConfirmVnode = (
      <XtxConfirm
        {...{ type, text, confirmCallback, cancelCallback }}
      ></XtxConfirm>
    )
    // const ConfirmVnode = createVNode(
    //   XtxConfirm,
    //   {
    //     type,
    //     text,
    //     confirmCallback,
    //     cancelCallback
    //   }
    // )
    render(ConfirmVnode, div)
  })
}
